//====================================================
//
//      inputgroup
//
//====================================================

//组合输入框
.@{prefix}inputgroup {
    display: inline-table;
    border-collapse: separate;
    position: relative;
    width: 220px;
    .prefix-border-radius(@radius-inputgroup @radius-inputgroup @radius-inputgroup @radius-inputgroup);
    .prefix-box-shadow(@shadow-inputgroup);
    .@{prefix}input {
        display: table-cell;
        position: relative;
        z-index: @zindex-inputgroup-input;
        width: 100%;
        margin-left: -1px;
        border-style: solid;
        border-width: @borderwidth-input;
        .prefix-border-radius(0 @radius-inputgroup @radius-inputgroup 0);
        &:first-child {
            margin-left: 0;
            .prefix-border-radius(@radius-inputgroup 0 0 @radius-inputgroup);
        }
        &:focus,
        &.active {
            border-width: @borderwidth-focus-input;
            padding-top: @paddingtop-input - @borderwidth-focus-input;
            padding-bottom: @paddingright-input - @borderwidth-focus-input;
            padding-right: @paddingbottom-input - @borderwidth-focus-input;
            padding-left: @paddingleft-input - @borderwidth-focus-input;
            z-index: @zindex-inputgroup-input-focus;
        }
    }
    .@{prefix}input-theme {
        &:focus,
        &.active {
            border-color: @bordercolor-input-theme-focus;
        }
    }
    .@{prefix}input-key {
        &:focus,
        &.active {
            border-color: @bordercolor-input-key-focus;
        }
    }
    .@{prefix}input-light {
        &:focus,
        &.active {
            border-color: @bordercolor-input-light-focus;
        }
    }
    .@{prefix}input-nice {
        &:focus,
        &.active {
            border-color: @bordercolor-input-nice-focus;
        }
    }
    .@{prefix}addons {
        display: table-cell;
        vertical-align: middle;
        position: relative;
        z-index: @zindex-inputgroup-addons;
        width: 1%;
        .comm-inlineblock-clearspace();
        .@{prefix}text,
        .@{prefix}btn {
            .prefix-border-radius(0);
            &:last-child {
                .prefix-border-right-radius(@radius-inputgroup);
            }
        }
        .@{prefix}text {
            display: inline-block;
            margin-left: -1px;
            padding: 4px 8px;
            height: @height-input;
            line-height: @height-input - 4px*2;
            font-size: @fontsize-input;
            color: @color-weak;
            background-color: @bgcolor-weak;
            border: 1px solid @bordercolor-input;
        }
        .@{prefix}text-small {
            height: @height-input-small;
            line-height: @height-input-small - 4px*2;
            font-size: @fontsize-input-small;
        }
        .@{prefix}text-large {
            height: @height-input-large;
            line-height: @height-input-large - 4px*2;
            font-size: @fontsize-input-large;
        }
        .@{prefix}btn {
            position: relative;
            margin-left: -1px;
            .prefix-box-shadow(none);
        }
        &:first-child {
            .@{prefix}text,
            .@{prefix}btn {
                &:last-child {          //优先级考虑，必须放在:first-child前面，否则同级只有一个元素的时:first-child的圆角样式会被覆盖
                    .prefix-border-radius(0);
                }
                &:first-child {
                    margin-right: 0;
                    .prefix-border-left-radius(@radius-inputgroup);
                }
            }
            .@{prefix}text {
                &:first-child {
                    padding-left: 15px;
                }
            }
        }
        &:last-child {
            .@{prefix}text {
                &:last-child {
                    padding-right: 15px;
                }
            }
        }
    }
}
.@{prefix}inputgroup-full {
    width: 100%;
}
